<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cal{
            background-color: gainsboro;
            width:210px;
        }
        .content{
            width:210px;
            height:280px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .content div{
            border-radius: 50%;
            box-sizing: border-box;
            width:50px;
            height:50px;
            border:1px solid gray;
            background-color: ghostwhite;
            /* 字体居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="cal">
        算式<input type="text" v-model="suanshi">
        输入<input type="text" v-model="shuru">
        结果<input type="text" v-model="jieguo">
        <table class="content">
            <tr>
                <td><div @click="clear">C</div></td>
                <td><div @click="clearCe">CE</div></td>
                <td><div></div></td>
                <td><div></div></td>
            </tr>
            <tr>
                <td><div @click="btnNum('1')">1</div></td>
                <td><div @click="btnNum('2')">2</div></td>
                <td><div @click="btnNum('3')">3</div></td>
                <td><div @click="btnF('+')">+</div></td>
            </tr>
            <tr>
                <td><div @click="btnNum('4')">4</div></td>
                <td><div @click="btnNum('5')">5</div></td>
                <td><div @click="btnNum('6')">6</div></td>
                <td><div @click="btnF('-')">-</div></td>
            </tr>
            <tr>
                <td><div @click="btnNum('7')">7</div></td>
                <td><div @click="btnNum('8')">8</div></td>
                <td><div @click="btnNum('9')">9</div></td>
                <td><div @click="btnF('*')">*</div></td>
            </tr>
            <tr>
                <td><div @click="btnF('/')">/</div></td>
                <td><div @click="btnNum('0')">0</div></td>
                <td><div @click="btnF('.')">.</div></td>
                <td><div @click="btnF('=')">=</div></td>
            </tr>
        </table>
    </div>
</div>
<script src="../vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return{
                suanshi:'',
                shuru:'',
                jieguo:''
            }
        },
        methods: {
            btnNum(index){
                this.shuru += index
            },
            btnF(index){
                if (index !== '='){
                    this.suanshi += this.shuru + index;
                    this.shuru = ''
                }else {
                    this.suanshi += this.shuru
                    this.jieguo = eval(this.suanshi)
                }
            },
            clear(){
                this.suanshi = ''
                this.shuru = ''
                this.jieguo = ''
            },
            clearCe() {
                this.shuru = ''
            }
        },
        computed: {
            newS(){
                return this.jieguo.toFixed(2)
            }
        }
    }).mount('#app')
</script>
</body>
</html>